<template>
  <div style="text-align: left">
    <a-button class="editable-add-btn" @click="showModal1">添加</a-button>
    <a-input-search placeholder="请输入名称关键字" style=" width: 200px" @search="onSearch" v-model="keyword"/>

    <br />
    <a-table bordered :data-source="list" :columns="columns"  rowKey='inventoryGoods' :pagination="paginationOpt">
      <template slot="name"> </template>
      <template slot="operation" slot-scope="text, record">
        <a @click="() => showModal2(record)">购买</a>
      </template>
    </a-table>



    <a-modal v-model="editVisible" title="购买" on-ok="edit">
      <template slot="footer">
        <a-button key="back" @click="editVisible=false">
          取消
        </a-button>
        <a-button key="submit" type="primary" @click="edit">
          提交
        </a-button>
      </template>
      <p>

        购买数量：<input type="text" v-model="obj.stock"><br>

      </p>
    </a-modal>
    <div id="myChart" :style="{width: '600px', height: '300px', clear:'both',float:'left',top:'20px'}"></div>
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'inventoryGoods',
        data: function () {
            return  {
                wareHouseUrl:this.baseURL+"inventoryGoods.ctl",
                shoppingUrl:this.baseURL+"shopping.ctl",
                list:[],
                obj:{},
                keyword:'',
                selectkey:'',

                columns: [
                    {
                        title: '序号',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        },
                    },
                    {
                        title: '商品名称',
                        dataIndex: 'name',
                    },
                    {
                        title: '商品简介',
                        dataIndex: 'description'

                    },
                    {
                        title: '商品编号',
                        dataIndex: 'no'

                    },
                    {
                        title: '商品来源',
                        dataIndex: 'source'

                    },
                    {
                        title: '库存',
                        dataIndex: 'stock'

                    },
                    {
                        title: '操作',
                        scopedSlots: { customRender: 'operation' },
                    },
                ],
                addVisible:false,
                logoutVisible:false,
                editVisible:false,
                // 分页
                paginationOpt: {
                    defaultCurrent: 1, // 默认当前页数
                    defaultPageSize: 5, // 默认当前页显示数据的大小
                    total: 0, // 总数，必须先有
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: ["5", "10", "15", "20"],
                    showTotal: (total) => `共 ${total} 条`, // 显示总数
                    onShowSizeChange: (current, pageSize) => {
                        this.paginationOpt.defaultCurrent = 1;
                        this.paginationOpt.defaultPageSize = pageSize;
                        //this.searchCameraFrom(); //显示列表的接口名称
                    },
                    // 改变每页数量时更新显示
                    onChange: (current, size) => {
                        this.paginationOpt.defaultCurrent = current;
                        this.paginationOpt.defaultPageSize = size;
                        //this.searchCameraFrom();
                    },
                }
            }
        },
        mounted () {
            this.getSchoolList()// 获取树结构的初始化父节点数据
        },
        methods: {
            getList () {
                var _this = this
                axios.get(this.wareHouseUrl).then((res) => {
                    _this.list = res.data
                    // console(res.dat)
                    _this.chartsdata = [0, 0, 0 ,0]
                    _this.list.forEach(function (item, i) {
                        _this.chartseries.forEach(function (o, i) {
                            if (item.description == o) {
                                _this.chartsdata[i]++
                            }
                        })
                    })
                    this.drawLine()
                })
            },
            getSchoolList(){
                var arr = this;
                if(this.selectkey!='')
                    axios.get(this.wareHouseUrl+"?"+this.selectkey).then((response) => {//根据选中的节点改变教师对象列表
                        arr.list=response.data;
                    })
                else
                    axios.get(this.wareHouseUrl).then((response) => {
                        arr.list=response.data;
                    })
            },

            showModal1() {
                this.addVisible = true;
                this.obj={};
            },

            showModal2(obj) {
                this.editVisible = true;
                this.obj=obj;
            },
            edit:function (id){
                axios.put(this.shoppingUrl,this.obj).then((res)=>{
                    alert(res.data.message);
                    this.obj={}
                });
                this.editVisible=false;
                this.getSchoolList();
            },
            onSearch(){
                var arr = this;
                axios.get(this.wareHouseUrl+"?id="+this.keyword).then((response) => {
                    arr.list=response.data;
                })
            }
        },
        created(){
            this.getSchoolList();
        }
    }

</script>

<style scoped>
  table{
    margin-top:50px;
    width:90%;
  }
  tr{
    line-height: 40px;
  }
  td{border-bottom: solid 1px #eee;}

  div p{ line-height: 50px;}
  div p input {line-height: 28px;}

</style>


